<!--  -->
<template>
  <div>
    <div class="row">
      <h2 v-show="listObj.isFirst">欢迎来到gitHub搜索页面</h2>
      <h2 v-show="listObj.isLoading">数据正在加载</h2>
      <h2 v-show="listObj.errMsg">{{listObj.errMsg}}</h2>
      <div class="card"
           v-show="listObj.listData.length!==0"
           v-for="(item,index) in listObj.listData"
           :key="index">
        <a :href="item.url"
           target="_blank">
          <img :src="item.avatar_url"
               style='width: 100px' />
        </a>
        <p class="card-text">{{item.login}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Lists',
  data () {
    return {
      listObj: {
        //用户数据
        listData: [],
        // 一上来欢迎页面
        isFirst: true,
        // 正在加载中
        isLoading: false,
        // 错误信息
        errMsg: false
      }
    }
  },
  methods: {
    getListsData (dataObj) {
      // ES6新语法：批量替换属性
      this.listObj = { ...this.dataObj, ...dataObj }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    // // 接受事件总线
    // let _this = this;
    // this.$eventBus.$on("getSearch", function (data) {
    //   console.log(data);
    //   // 这里的this根本就不是vue的那个Vm,而是this.$eventBus
    //   // 解决办法一:将this传下去
    //   // 解决办法二:将回调函数写在methods里
    //   _this.listData = data.items;
    // });

    this.$eventBus.$on("getSearchData", this.getListsData)
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>